import { ObjectDirective } from 'vue'
import { usePermission } from "@/hooks/web/usePermission";

export const permission: ObjectDirective = {
  mounted(el: HTMLButtonElement, binding, vnode) {
    if (binding.value == undefined) return
    const { action, effect } = binding.value
    const { hasPermission } = usePermission()
    if (!hasPermission(action)) {
      if (effect == 'disabled') {
        el.disabled = true
        el.style["disabled"] = 'disabled'
        el.classList.add("n-button--disabled")
      } else {
        el.remove()
      }
    }
  }
}
